<template>
	<!-- 客服 -->
	<view>
		<scroll-view scroll-y="true" :scroll-top="scrolltop" style="overflow: hidden;">
			<view class="cu-chat" v-for="(item,index) in list" :key="index">
				<view class="cu-item" v-if="item.send_uid == uid">
					<image class="cu-avatar radius" :style="{background:'none'}"
						:src="item.avatar?url+item.avatar:'/static/logo.png'" mode=""></image>
					<view class="main">
						<view class="date" style="white-space: nowrap;">{{item.nickname||'商家'}}</view>
						<view class="content shadow">
							<text>{{item.message}}</text>
						</view>
					</view>
					<view class="date " style="bottom:0;">{{item.time||item.updated_at}}</view>
				</view>

				<view class="cu-item self" v-if="item.send_uid == user_uid">
					<view class="main">
						<view class="date self_name" style="white-space: nowrap;"></view>
						<view class="content shadow" style="background-color: #1CD699;color: #fff;">{{item.message}}
						</view>
					</view>
					<view class="date " style="bottom:0;">{{item.time || item.created_at}}</view>
					<image class="cu-avatar radius" :style="{background:'none'}"
						:src="item.avatar?url+item.avatar:'/static/logo.png'" mode=""></image>
				</view>
			</view>
		</scroll-view>


		<view class="cu-bar foot input" :style="[{paddingBottom:iphone+'rpx'}]"
			style="padding-top: 10rpx;padding-bottom: 13rpx;">
			<view class="action">
				<!-- <text class="cuIcon-pic text-grey"></text> -->
			</view>
			<view class="center">
				<input class="solid-bottom" v-model="InputBottom" maxlength="300" cursor-spacing="10"></input>
			</view>
			<button class="cu-btn bg-green  fs" @click="FS">发送</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
				InputBottom: '',
				iphone: 0,
				id: 0,
				text: '',
				T: 0,
				uid: null, //商家聊天id
				user_uid: null,
				one: 0,
				list: [],
				urldata: '',
				connecting: '',
				connected: '',
				imdata: {
					"message": "",
					"avatar": "",
					"nickname": "",
					"send_uid": '',
					"time": ''
				},
				scrolltop: 0, //滚动条位置
			};
		},
		methods: {
			iniSocket() {
				let _this = this;
				console.log("聊天页面重连")
				uni.connectSocket({
					url: 'wss://guizhouchenxun.com:8282',
					data() {
						return {
							msg: 'Hello'
						}
					},
					// #ifdef MP
					header: {
						'content-type': 'application/json'
					},
					// #endif
					// #ifdef MP-WEIXIN
					method: 'GET',
					// #endif
					success(res) {
						console.log("创建连接成功", res);
						// 这里是接口调用成功的回调，不是连接成功的回调，请注意
					},
					fail(err) {
						console.log(err);
						// 这里是接口调用失败的回调，不是连接失败的回调，请注意
					}
				})
				uni.onSocketOpen((res) => {
					console.log('onOpen', res);

				})
				
			},
			FS(item) {
				
			},
			getMobileInfo() {
				const that = this
				const mobileInfo = uni.getSystemInfoSync();
				let iphoneXArr = ["iPhone X", "iPhone XR", "iPhone XS MAX", "iPhone 11", "iPhone 11 Pro Max",
					"iPhone 12 min", "iPhone 13 min", "iPhone 12 (Por)", "iPhone 13 (Por)", "iPhone 12 Por Max",
					"iPhone 13 Por Max"
				];
				for (let i = 0; i < iphoneXArr.length; i++) {
					if (mobileInfo.model == iphoneXArr[i]) {
						that.iphone = 35;
					}
				}
			}
		},
		onLoad(e) {
			let self = this
			// console.log(e);
			// 获取手机信息
			this.getMobileInfo();
			this.uid = e.uid

			this.url = this.$base

			this.$api.user().then(res => {
				// console.log(res);
				this.imdata.avatar = res.data.avatar
				this.imdata.nickname = res.data.nickname
				this.user_uid = res.data.id
				this.imdata.send_uid = this.user_uid
			})
			this.$api.user_unread().then(res => {
				// console.log(res);

			})
			this.T = setInterval(() => {
				// this.list = null
				if (Array.isArray(uni.getStorageSync("" + this.uid))) {
					// console.log(1);
					this.list = uni.getStorageSync("" + this.uid)
					this.list = [].concat.apply([], this.list)
					// console.log(this.list,'数组');
				} else {
					// console.log(0);
					this.list = [uni.getStorageSync("" + this.uid)]
					this.list = [].concat.apply([], this.list)
					// console.log(this.list, '不是数组');
				}
				this.scrolltop = this.list.length * 1000
			}, 1000)
			uni.sendSocketMessage({
				data: '11',
				success() {
					console.log("在线")
				},
				fail() {
					// self.iniSocket();
				}
			})
		},
		onShow() {},
		onUnload() {
			clearTimeout(this.T)
			// console.log(this.T);
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100upx;
	}

	scroll-view {
		height: calc(100vh - 120rpx);
	}

	.cu-chat {
		padding: 0 0 0 20rpx 0;

		.cu-item {
			.main {
				position: relative;
				top: 40rpx;

				.span {
					width: 506rpx;
					font-size: 28rpx;
					color: #666666;
				}

				.date {
					width: 100%;
					font-size: 24rpx;
					color: #999;
					top: -40rpx;
					left: 0;
				}
			}

			.cu-avatar {
				width: 88rpx;
				height: 88rpx;
			}
		}

		.self {
			.self_name {
				width: 100%;
				text-align: right;
			}
		}
	}


	.text-grey {
		font-size: 52rpx;
	}

	.center {
		width: 535rpx;
		height: 71rpx;
		background: #F8F8F8;
		border-radius: 36rpx;
	}

	.fs {
		background: none;
		color: #1CD699;
		box-shadow: none;
		font-size: 30rpx;
		font-weight: bold;
		white-space: nowrap;
	}
</style>
